/**
 * Created by Ysssssss on 2021/4/30.
 */

import React, { PureComponent } from 'react'
import ShoppingMallPreviewShareIcon from "@components/shoppingMall/ShoppingMallPreviewShareIcon";
import {Row, Col, Radio, Switch} from 'antd'
import {DesignTemplateContext} from "@pages/shoppingMall/ShoppingMallDesignDetailPage";
import ImageUpload from "@common/presentational/ImageUpload";
import DateRangePicker from "@common/presentational/DateRangePicker";
import {getHistoryMatchParams} from "@utils/setUrlQuery";
import {withRouter} from "react-router-dom";

@withRouter
class StartPageDesign extends PureComponent {
    static contextType = DesignTemplateContext;

    constructor(props, context) {
        super(props, context);

        const { subNav } = context
        const { platformId } = getHistoryMatchParams(props)
        if (!subNav.includes('special')) {
            props.history.replace(`/shopping-mall/design/${platformId}/detail`)
        }
    }

    onValueChange (key, value) {
        if (key === 'dateRange') {
            const { onChange, templateInfo } = this.context
            onChange && onChange('startPage', {
                ...templateInfo.startPage,
                startTime: value.startDate,
                endTime: value.endDate,
            })
            return;
        }
        const { onChange, templateInfo } = this.context
        onChange && onChange('startPage', {
            ...templateInfo.startPage,
            [key]: value,
        })
    }

    onTargetChange (key, e) {
        const { onChange, templateInfo } = this.context
        onChange && onChange('startPage', {
            ...templateInfo.startPage,
            [key]: e.target.value
        })
    }

    render () {
        const { templateInfo } = this.context
        const { startPage } = templateInfo
        return (
            <>
                <div className="preview-container">
                    <div className="preview-reality">
                        <ShoppingMallPreviewShareIcon />
                        <img src={startPage.picture || require('@assets/image/design-start-page.png')} alt="" width="100%" height="100%"/>
                    </div>
                </div>
                <div className="operation-container ft-clr-d">
                    <div className="ft-16">启动页</div>
                    <div className="ft-12 ft-clr-ml pdb-16 bdb-l">可以彰显品牌调性，抑或是作为推荐商品、活动的营销窗口</div>
                    <Row className="mgt-24">
                        <Col span={6}>是否启用：</Col>
                        <Col span={18} className="flex-row-right">
                            <Switch checked={startPage.isOpen} onChange={this.onValueChange.bind(this, 'isOpen')}/>
                        </Col>
                    </Row>
                    <Row className="mgt-36">
                        <Col span={6}>启动页图片：</Col>
                        <Col span={18}>
                            <ImageUpload
                                value={startPage.picture}
                                onChange={this.onValueChange.bind(this, 'picture')}
                                accept='image/png, image/jpeg, image/jpg'
                                maxFileSize="1m"
                                uploadIntro={(
                                    <div className="ft-12 ft-clr-ml mgl-16" style={{width: '160px'}}>
                                        支持PNG、JPG格式，不超过1M，建议尺寸750*1624PX
                                    </div>
                                )}
                            />
                        </Col>
                    </Row>
                    <Row className="mgt-36">
                        <Col span={6}>推广时间：</Col>
                        <Col span={18}>
                            <DateRangePicker
                                startDate={startPage.startTime}
                                endDate={startPage.endTime}
                                onChange={this.onValueChange.bind(this, 'dateRange')}
                            />
                        </Col>
                    </Row>
                    <Row className="mgt-36">
                        <Col span={6}>显示时长：</Col>
                        <Col span={18}>
                            <Radio.Group value={startPage.showTime}
                                         onChange={this.onTargetChange.bind(this, 'showTime')}
                            >
                                <Radio value={1000}>1秒</Radio>
                                <Radio value={3000}>3秒</Radio>
                                <Radio value={5000}>5秒</Radio>
                            </Radio.Group>
                        </Col>
                    </Row>
                </div>
            </>
        )
    }
}

export default StartPageDesign